﻿@model IEnumerable<OutPut>
@{
    ViewBag.Title = "秀色可餐";
}


<div  style="margin:0px 6px 10px 0px;" >
<div class="well form-inline">
    <div class="btn-group" data-toggle="buttons-radio"  >
      <button tid="0" class="btn active"><i class="icon-circle-arrow-up"></i>最新</button>
      <button tid="1" class="btn"><i class="icon-fire"></i>最热</button>
      <button tid="2" class="btn"><i class="icon-star-empty"></i>最赞</button>
    </div>    
    <div class="textleft" style="float:right;" >
            <span>
            <input id="txtsearch" placeholder="请输入你感兴趣的内容" type="text" class="input-medium" />
            </span>
            <button id="btnmin" class="btn"  ><i class="icon-search"></i>搜索</button>
        </div>
        <div class="clear"></div>
    </div>
</div>
<div id="main" style="width:100%;" >
<ul  class="pbl_box unstyled" id="ul_main" >
    <li class="wmli">
        <div id="wrap">
            @if (ViewBag.Keywords!=null){
                foreach (var item in ViewBag.Keywords)
                {
                    ViewBag.keyword += item.Keyword;
                    <a >@item.Keyword</a>
                }
            } 
        </div>
        <div id="keyselect" class="topline" style="display:none;" >
            当前选中:<span style="padding: 2px 4px;border: 1px solid #e1e1e8;background-color: #f7f7f9;"><d></d><i class="icon-remove"></i></span>
        </div>
        <div class="topline" style="height:200px;margin-top:15px;" >
            <script src="~/js/ads/ad-photo-list.js"></script>
        </div>
    </li>
    @if (Model != null)
    {
        foreach (var item in Model)
        {
            var height = Convert.ToInt32(200 / item.Scale);
            <li id="li_@item.Id" class="wmli mi" >
                <div class="btnlist" ><button data-id="@item.Id" class="btn collect">收藏</button><button data-id="@item.Id" data-sup="@item.SupCount" class="btn sup">(@item.SupCount)赞</button></div>
                <div class="pic" style="height:@(height>500?500:height)px;" >
                <a href="/photo/@item.Id" target="photo"  title="@item.Title"  >
                    <img style="height:@(height)px" src="@(StaticCs.ImageUrl)/img?m=Width&w=200&file=@item.Pic">
                </a>
                </div>
                @if(!item.IsSys){
                <div class="clear textleft " >
                    <div class="pblheader"><img src="@(StaticCs.ImageUrl)/img/Artwork?file=@item.Header" /></div>
                    <div class="usertxt" >
                    <span><a rel="tooltip" data-original-title="去Ta的主页看看吧！" href="/@item.Uid">@item.Uname</a></span>
                    <span class="font12" style="float:right;" >@(StaticCs.GetTimer(item.Time))前</span>
                    </div>
                </div>
                }
                <div class="clear textleft topline bg body" style="position:relative;overflow:inherit;" >
                    @(string.IsNullOrEmpty(item.Title)?"(没有描述)":item.Title)
                    <a data-id="@item.Id" title="评论" rel="tooltip" class="replyButton"></a>
                </div>
                @if (!string.IsNullOrEmpty(item.Address))
                {
                <div class="clear textleft font12 marker topline bg" >
                   <span><i class="icon-map-marker"></i><a rel="tooltip" data-original-title="去发现更多分享"  target="_blank" href="@item.AddressUrl" >@item.Address</a></span>
                </div>
                }
                <div class="commentbox clear topline"  >
                    <div id="commentlist_@item.Id" class="commentlist">
                        @if(item.Comments!=null){
                            foreach (var citem in item.Comments)
                            {
                                <div class="clear textleft " >
                                    <div class="pblheader" style="margin-top:0px;">
                                        <img src="@(StaticCs.ImageUrl)/img/Artwork?file=@citem.Header" />
                                    </div>
                                    <div class="usertxt">
                                    <span><a rel="tooltip" data-original-title="去Ta的主页看看吧！" href="/@citem.Uid">@citem.Uname</a>说:</span>
                                     <span class="font12 fontcl">@citem.Content</span>
                                    </div>
                                </div>
                            }
                        }
                    </div>
                    <div id="com_@item.Id" class="comment write" >
                        <textarea id="txtcomment_@item.Id" placeholder="写入你对此分享的看法吧！"></textarea>
                        <a id="combtn_@item.Id" data-id="@item.Id" rel="tooltip" data-original-title="提交" class="grid_comment_button"></a>
                    </div>
                </div>
            </li>
        }

    }
</ul>
</div>
<div class="clear"></div>
<div id="LoadingPins" style="display: none;"><img src="/css/images/BouncingLoader.gif" alt="Pin Loader Image"><span>数据加载中…</span></div>
<script type="text/template" id="templateli">
<li id="li_{Id}" class="wmli mi" >
<div class="btnlist" ><button data-id="{Id}" class="btn collect">收藏</button><button data-id="{Id}" data-sup="{SupCount}" class="btn sup">({SupCount})赞</button></div>
<div class="pic" style="height:{divheight}px;" >
<a  href="/photo/{Id}" target="photo" title="{Title}"  >
<img style="height:{height}px" src="@(StaticCs.ImageUrl)/img?m=Width&w=200&file={Pic}">
</a>
</div>
<div class="clear textleft " style="{show}" >
<div class="pblheader"><img src="@(StaticCs.ImageUrl)/img/Artwork?file={Header}" /></div>
<div class="usertxt" >
<span><a rel="tooltip" data-original-title="去Ta的主页看看吧！" href="/{Uid}">{Uname}</a></span>
<span class="font12" style="float:right;" >{Time}前</span>
</div>
</div>
<div class="clear textleft topline bg body" style="position:relative;overflow:inherit;" >
{Title}
<a data-id="{Id}" title="评论" rel="tooltip" class="replyButton"></a>
</div>
<div class="clear textleft font12 marker topline bg {display}" >
<span><i class="icon-map-marker"></i><a rel="tooltip" data-original-title="去发现更多分享"  target="_blank" href="{AddressUrl}" >{Address}</a></span>
</div>
<div class="commentbox clear topline"  >
<div id="commentlist_{Id}" class="commentlist">
{comments}
</div>
<div id="com_{Id}" class="comment write" >
<textarea id="txtcomment_{Id}" placeholder="写入你对此分享的看法吧！"></textarea>
<a id="combtn_{Id}" data-id="{Id}" rel="tooltip" data-original-title="提交" class="grid_comment_button"></a>
</div>
</div>
</li>
</script>
<script type="text/template" id="templatereply" >
<div class="clear textleft " ><div class="pblheader" style="margin-top:0px;">
<img src="@(StaticCs.ImageUrl)/img/Artwork?file={Header}" /></div><div class="usertxt">
<span><a rel="tooltip" data-original-title="去Ta的主页看看吧！" href="/{Uid}">{Uname}</a>说:</span>
<span class="font12 fontcl">{Content}</span></div></div>
</script>

@section scripts{
    @Scripts.Render("~/js/jqwaterfall")  
    <script type="text/javascript">
        styletag();
        var lastid = @ViewBag.lastid;
        var typeId=0;
        var inload=false;
        var isshow=false;
        var index=0;
        var keyword="";

        function styletag(){
            $(function(){
                var obj=$("#wrap a");
                function rand(num){
                    return parseInt(Math.random()*num+1);
                }
                function randomcolor(){
                    var str=Math.ceil(Math.random()*16777215).toString(16);   
                    if(str.length<6){   
                        str="0"+str;   
                    }   
                    return str;
                }
                for(len=obj.length,i=len;i--;){
                    obj[i].style.left=rand(600)+"px";   
                    obj[i].style.top=rand(400)+"px";   
                    obj[i].className="color"+rand(5);   
                    obj[i].style.zIndex=rand(5);   
                    obj[i].style.fontSize=rand(12)+12+"px";   
                    obj[i].style.color="#"+randomcolor();
                }  
            })
        }

        var waterfall=$("#main").waterfall({marginleft:11,margintop:10,childbox:"ul .wmli",wffn:function(){getload();},float:"right"});
        function getload(){
            if(!inload){
                inload=true;
                if(typeId==0)
                {
                    loadarticleData(lastid,10);
                }else if(typeId==1){
                    loadarticleDataHost();
                }else{
                    loadarticleDataPraise();
                }
            }
        }
        $(document).ready(function(){
            $(".btn-group .btn").click(function(){
                $(this).toggleClass('active').siblings().removeClass("active");
                typeId=$(".btn-group").find(".active").attr("tid");
                if(typeId==undefined)
                {
                    typeId=0;
                }
                isshow=false;
                lastid=0;
                index=0;
                showloading();
                $("#ul_main .mi").remove();
                if(typeId==0)
                {
                    loadarticleData(lastid,24);
                }else if(typeId==1){
                    loadarticleDataHost();
                }else{
                    loadarticleDataPraise();
                }
            });
            $("input[name=CityName]").fmtxDropdown({ url: "/action/area/CityBykey", value: "CityId" });
            $("input[name=PlaceName]").fmtxDropdown({ url: "/action/area/PlaceBykey", value: "PlaceId", param: "input[name=CityId]", paramkey: "cityid"});
            bindevent();
            $("#btnmin").click(function(){
                showloading();
                keyword=$("#txtsearch").val();
                $("#keyselect").hide();
                $("#keyselect span d").text(keyword);
                $("#ul_main .mi").remove();
                loadarticleData(0,20);
            });

            $("#wrap a").click(function(){
                keyword=$(this).text();
                isshow=false;
                lastid=0;
                index=0;
                showloading();
                $("#keyselect").show();
                $("#keyselect span d").text(keyword);
                $("#ul_main .mi").remove();
                if(typeId==2)
                {
                    loadarticleDataPraise();
                }else if(typeId==1){
                    loadarticleDataHost();
                }else{
                    loadarticleData(lastid,20);
                }
            });
            $("#keyselect span i").click(function(){
                keyword="";
                isshow=false;
                lastid=0;
                index=0;
                showloading();
                $("#keyselect").hide();
                $("#keyselect span d").text(keyword);
                $("#ul_main .mi").remove();
                if(typeId==2)
                {
                    loadarticleDataPraise();
                }else if(typeId==1){
                    loadarticleDataHost();
                }else{
                    loadarticleData(lastid,20);
                }
            });

            $("#txtsearch").keydown(function(e){
                if(e.keyCode==13)
                {
                    showloading();
                    keyword=$("#txtsearch").val();
                    $("#keyselect").hide();
                    $("#keyselect span d").text(keyword);
                    $("#ul_main .mi").remove();
                    loadarticleData(0,20);
                }
            });
        });


        function loadarticleData(maxid,size)
        {
            $.get("/Action/Picture/GetPicture",{maxid:maxid,size:size,keyword:keyword},function(data){
                if(data&&data.length>0)
                {
                    $("#ul_main").append(BindData(data));
                    ClosemsgModal();
                    bindevent();
                    inload=false;
                    lastsup=data[data.length-1].SupCount;
                }else{
                    showinfo("已到世界的尽头！"); 
                }
                waterfall.sortWaterfall();
            });
        }

        function loadarticleDataHost()
        {
            $.get("/Action/Picture/GetHostPicture",{index:index,size:24,keyword:keyword},function(data){
                if(data&&data.length>0)
                {
                    $("#ul_main").append(BindData(data));
                    ClosemsgModal();
                    bindevent();
                    index++;
                    inload=false;
                }else{
                    showinfo("已到世界的尽头！"); 
                }
                waterfall.sortWaterfall();
            });
        }

        function loadarticleDataPraise()
        {
            $.get("/Action/Picture/GetPraisePicture",{index:index,size:24,keyword:keyword},function(data){
                if(data&&data.length>0)
                {
                    $("#ul_main").append(BindData(data));
                    ClosemsgModal();
                    bindevent();
                    index++;
                    inload=false;
                }else{
                    showinfo("已到世界的尽头！"); 
                }
                waterfall.sortWaterfall();
            });
        }

        function BindData(data)
        {
            var res="";
            $.each(data,function(i,n){
                if(!document.getElementById("li_"+n.Id))
                {
                    var area=n.Place>0?n.Place:n.City;
                    res+=$("#templateli").html().replaceo("display",(n.Address==""||n.Address==null)?"displaynone":"")
                        .replaceo("height",200/n.Scale)
                        .replaceo("divheight",(200/n.Scale)>500?500:200/n.Scale)
                        .replaceo("Time",MillisecondToDate(n.Time))
                        .replaceo("show",n.IsSys?"display:none":"")
                        .replaceAll("Title",n.Title==null?"(没有描述)":n.Title)
                        .replaceo("display",(area==""||area==null)?"displaynone":"")
                        .fill(n)
                        .replaceo("comments",BindComment(n.Comments));
                }
            });
            lastid=data[data.length-1].Id;
            return res;
        }

        function BindComment(data)
        {
            var res="";
            $.each(data,function(i,n){
                if(document.getElementById("li_"+data.Id))
                {
                    res+=$("#templatereply").html().fill(n);
                }
            });
            return res;
        }

        function bindevent()
        {
            $(".wmli").hover(function(){
                $(this).children(".btnlist").show();
                $(this).find(".replyButton").css({visibility:"visible"}).animate({opacity:1},100);
            },function(){
                $(this).children(".btnlist").hide();
                $(this).find(".replyButton").css({visibility:"hidden"}).animate({opacity:0},100);
            });

            $(".replyButton").toggle(function(){
                isshow=true;
                var id=$(this).attr("data-id");
                $("#com_"+id).show();
                setTimeout("commentborder1("+id+")",500);
                waterfall.sortWaterfall();
                $("#txtcomment_"+id).animate({borderColor:'rgba(240, 9, 184,1)'},500);
            },function(){
                isshow=false;
                var id=$(this).attr("data-id");
                $("#com_"+id).hide();
                waterfall.sortWaterfall();
            });

            $(".grid_comment_button").click(function(){
                var id=$(this).attr("data-id");
                var body=$("#txtcomment_"+id).val();
                if(body!=null&&body!=""){
                    $.post("/Action/Comment/DoCommentP",{id:id,content:body},function(data){
                        if(data.Id>0)
                        {
                            $("#commentlist_"+id).append($("#templatereply").html().fill(data));
                            $("#com_"+id).hide();
                            waterfall.sortWaterfall();
                            $("#txtcomment_"+id).val("");
                            showinfo("发布成功！");
                        }else if(data.error==1001){
                            showloginDialog();
                        }else{
                            showerror("发布失败！");
                        }
                    });
                }
            });
            $(".comment textarea").focus(function(){
                isshow=false;
            });
            $(".sup").click(function(){
                var id=$(this).attr("data-id");
                var obj=$(this);
                $.get("/Action/Praise/DoPariseP",{id:id},function(data){
                    if(data.success)
                    {
                        var sup=$(obj).attr("data-sup");
                        $(obj).text("("+(parseInt(sup)+1)+")赞");
                        showinfo(data.msg);
                    }else if(data.error==1001){
                        showloginDialog();
                    }else{
                        showerror(data.msg);
                    }
                });
            });
            $(".collect").click(function(){
                var id=$(this).attr("data-id");
                $.get("/Action/Collect/DoCollectP",{id:id},function(data){
                    if(data.success)
                    {
                        showinfo(data.msg);
                    }else if(data.error==1001){
                        showloginDialog();
                    }else{
                        showerror(data.msg);
                    }
                });
            });

            $('a[rel=tooltip]').tooltip({
                'placement': 'bottom'
            });
            
        }
        var isshow=true;
        function commentborder1(id)
        {
            $("#txtcomment_"+id).animate({borderColor:'rgba(147, 179, 171,1)'},500);
            if(isshow){
                setTimeout("commentborder2("+id+")",500);
            }
        }
        function commentborder2(id)
        {
            $("#txtcomment_"+id).animate({borderColor:'rgba(240, 9, 184,1)'},500);
            setTimeout("commentborder1("+id+")",500);
        }

        function setTitle(obj,msg)
        {
            $(obj).attr("title",msg);
            setTimeout("doremovetitle("+obj+")",600);
        }

        function doremovetitle(obj)
        {
            $(obj).removeAttr("title");
        }
        setmainmenu("photo");
    </script>  
}